<template>
  <div class="contrast-content">
    <div class="content-item" v-for="(item, index) in list" :key="index">
      <span class="order-num-20">{{ index + 1 }}</span>
      <div class="item-inner">
        <el-row>
          <el-col :span="6">
            <span class="labels-15">设备：</span>
            <span class="info-20"> {{ item.deviceName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="labels-15">时间：</span>
            <span class="info-20"> {{ item.date }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="labels-15">周期：</span>
            <span class="info-20">本周期</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">早：</span>
            <span class="warning-20"> {{ numsFilter(item.currentMorningFlow) }}</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">中：</span>
            <span class="warning-20"> {{ numsFilter(item.currentNoonFlow)}}</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">晚：</span>
            <span class="warning-20"> {{ numsFilter(item.currentNightFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">日：</span>
            <span class="warning-20"> {{ numsFilter(item.currentDayFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">月：</span>
            <span class="warning-20"> {{ numsFilter(item.currentMonthFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">年：</span>
            <span class="warning-20"> {{ numsFilter(item.currentYearFlow)}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <span class="labels-15">周期：</span>
            <span class="info-20">上周期</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">早：</span>
            <span class="warning-20"> {{ numsFilter(item.lastMorningFlow)}}</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">中：</span>
            <span class="warning-20"> {{ numsFilter(item.lastNoonFlow)}}</span>
          </el-col>
          <el-col :span="3">
            <span class="labels-15">晚：</span>
            <span class="warning-20"> {{ numsFilter(item.lastNightFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">日：</span>
            <span class="warning-20"> {{ numsFilter(item.lastDayFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">月：</span>
            <span class="warning-20"> {{ numsFilter(item.lastMonthFlow)}}</span>
          </el-col>
          <el-col :span="4">
            <span class="labels-15">年：</span>
            <span class="warning-20"> {{ numsFilter(item.lastYearFlow)}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GET_RESTFUL } from '@/api'
import { getDay } from '@/utils'
import useSettingStore from "@/stores/setting";

const list = ref<FlowData[]>([])
let timer:number

onMounted(()=>{
  getData()
  nextTick(()=>{
    swiper()
  })
})

onBeforeUnmount(()=>{
  clearData()
})

function numsFilter(msg){
  return msg || 0;
}

function clearData(){
  if (timer){
    clearInterval(timer)
    timer = null!
  }
}

function getData(){
  let date = getDay(-1,'-');
  GET_RESTFUL('contrast',date).then(res =>{
    list.value = res.data
  })
}

//轮询
function swiper() {
  if (timer) {
    return
  }
  let looper = () => {
    getData()
  };
  timer = setInterval(looper,  useSettingStore().listAutoTime);
}

</script>

<style scoped lang="scss">
.contrast-content{
  width: 90%;
  height: 90%;
  margin: 0 auto;
}
</style>